<template>
	<Row :gutter="16">
        <Col span="6" style="border-right: 1px dotted #e9eaec">
            <div>
            	<Tree :data="baseData" @on-select-change="changeSelect"></Tree>
                <Upload
                    multiple
                    type="drag"
                    name="avatar"
                    ref="upload"
                    :on-preview="handlePreview"
                    :on-success="handleSuccess"
                    action="http://localhost:3000/users/upload">

                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击或将文件拖拽到这里上传</p>
                    </div>
                </Upload>
            </div>
        </Col>
        <Col span="18">
            <div>
                
                <Button @click="handleSelectAll(true)" type="primary" class="p1"><Icon type="checkmark-circled" style="margin-right:10px;"></Icon>设置全选</Button>
                <Button @click="handleSelectAll(false)" type="primary" class="p1"><Icon type="android-cancel" style="margin-right:10px;"></Icon>取消全选</Button>
                <Button type="warning" class="p2" @click="deleSelect"><Icon type="ios-trash" style="margin-right:10px;"></Icon>删除选中</Button>
            	<Table ref="selection" border :columns="columns" :data="list" @on-selection-change="changeS"></Table>
              
            </div>
            
        </Col>
    </Row>
</template>
<script>
    import Base from '../../common/Base.js';

	export default {
        mixins:[Base],
        data () {
            return {
                module:'upload',
                baseData:[],
                formValidateUpload:{
                    title:'',
                    photo:''
                },
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '图片原名',
                        key: 'originalname',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.originalname)
                            ]);
                        }
                    },
                    {
                        title: '图片大小',
                        key: 'encoding'
                    },
                    {
                        title: '图片路径',
                        key: 'path'
                    },
                    {
                        title: '当前图片名字',
                        key: 'filename'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            name=params.row.filename;
                                            this.instance(name)

                                        }
                                    }
                                }, '查看'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$http({//获取id并删除改表单
                                                method:'DELETE',
                                                url:'http://localhost:3000/upload/data/'+params.row._id
                                            }).then((res)=>{
                                                this.loadmsg();
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ]
            }
        },
        methods:{
            changeS(selection){
                this.arr=[];
                for(var i=0;i<selection.length;i++){
                    this.arr.push(selection[i]._id)
                }
            },
            deleSelect(){//删除选中按钮arr里的id
                var len=this.arr.length;
                for(var i=0;i<len;i++){
                    this.$http({//获取id并删除改表单
                        method:'DELETE',
                        url:'http://localhost:3000/upload/data/'+this.arr[i]
                    }).then((res)=>{
                        this.loadmsg();
                    });
                }
                
            },
            handleSuccess(response, file, fileList){
                this.loadmsg();
                console.log(file);
                // console.log(fileList);
                //console.log(this.$refs.upload)
            },
            handlePreview(file){
                console.log(file);
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            openUpload(){
                this.modal1=true;
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        console.log(this.formValidateUpload);
                        this.$Message.success('提交成功!');
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            instance (name) {
                const title = name;
                const content = '<img src=""><p>一些对话框内容</p>';
                    
                this.$Modal.info({
                    title: title,
                    content: content
                });
            }
        },
        created(){
            this.$http({
                url:'http://localhost:3000/cate/list/2',
                method:'get'
            }).then(res=>{
                this.baseData=res.data;
            });
            this.loadmsg();
        }
    }
</script>
<style>

</style>